import { Button, Card, List, Modal } from "antd";
import { AllCopsConfig } from "./config";
import { useState } from "react";
import { AllCopParamList } from "./rules/all";
import EditParam from "./EditParam";

export interface AllCopCfgPanelProps {
    allCops: AllCopsConfig;
    onChange: (newValue: AllCopsConfig) => void;
}

export default function AllCopCfgPanel(props: AllCopCfgPanelProps) {
    const [showModal, setShowModal] = useState(false);
    return (
        <Card bordered={false} extra={
            <Button onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}>添加配置</Button>
        }>
            <List rowKey="param" dataSource={AllCopParamList.filter(item => props.allCops[item.param] !== undefined)} renderItem={item => (
                <List.Item>
                    <Card title={item.param} bordered={false} style={{ width: "100%" }} extra={
                        <Button type="link" onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const newValue = props.allCops;
                            delete newValue[item.param];
                            props.onChange(newValue);
                        }}>删除配置</Button>
                    }>
                        {item.descCn !== undefined && <p>{item.descCn}</p>}
                        {item.descEn !== undefined && <p>{item.descEn}</p>}
                        <EditParam value={props.allCops[item.param]} defaultValue={item.defaultValue} demoValue={item.demoValue} optionList={item.optionList}
                            validValue={item.validValue}
                            onChange={value => {
                                const newValue = props.allCops;
                                newValue[item.param] = value;
                                props.onChange(newValue);
                            }} />
                    </Card>
                </List.Item>
            )} />
            {showModal == true && (
                <Modal open title="增加配置" footer={null} bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowModal(false);
                    }}>
                    <List rowKey="param" dataSource={AllCopParamList.filter(item => props.allCops[item.param] === undefined)} renderItem={item => (
                        <List.Item key={item.param}>
                            <Card title={item.param} style={{ width: "100%" }} bordered={false} extra={
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    const newValue = props.allCops;
                                    newValue[item.param] = item.defaultValue;
                                    props.onChange(newValue);
                                    setShowModal(false);
                                }}>增加属性</Button>
                            }>
                                {item.descCn !== undefined && <p>{item.descCn}</p>}
                                {item.descEn !== undefined && <p>{item.descEn}</p>}
                            </Card>
                        </List.Item>
                    )} />
                </Modal>
            )}
        </Card>
    )
}